<template>
  <div class="wrapper">
    <el-form :inline="true">
      <el-form-item>
        <el-form-item>
          <el-dropdown @command="setTime">
            <span class="el-dropdown-link">
              {{timeStr}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">

              <el-dropdown-item :command="{value: '0', title: '时间类型' }">时间类型</el-dropdown-item>
              <el-dropdown-item :command="{value: '1', title: '入住时间' }">入住时间</el-dropdown-item>
              <el-dropdown-item :command="{value: '2', title: '离店时间' }">离店时间</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="startEndTime"
          size="small"
          :disabled="time==0"
          :clearable="false"
          style="height:34px;width:230px"
          type="daterange"
          @change="_reset"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="fr" v-has="'financeoverviewexcel'">
        <el-button type="primary"
          size="small"
          @click.native="_export"
          :disabled="!transferList.length"
          style="width:60px">
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item>
        <el-table max-height="550"
          :data="transferList">
          <el-table-column label="付款方"
            fixed
            prop="payName"
            width="100"></el-table-column>
          <el-table-column label="结算单号"
            prop="clearingNum"
            width="100"></el-table-column>
          <el-table-column label="流水单号"
            prop="flowing"
            width="100"></el-table-column>
          <el-table-column label="收款酒店"
            prop="hotelName"
            width="150"></el-table-column>
          <el-table-column label="收款方姓名"
            prop="person"
            width="100"></el-table-column>
          <el-table-column label="收款方银行"
            prop="banks"
            width="100"></el-table-column>
          <el-table-column label="收款方卡号"
            width="250"
            prop="account"></el-table-column>
          <el-table-column label="付款金额"
            prop="payMoney"
            width="100"></el-table-column>
          <el-table-column label="到账时间"
            prop="arriveTime"
            width="150"></el-table-column>
          <el-table-column label="结算时间"
            prop="createTime"
            width="150"></el-table-column>
          <el-table-column label="备注"
            prop="remark"
            width="250"></el-table-column>
          <el-table-column label="付款方"
            prop="payName"></el-table-column>
          <el-table-column label="操作"
            fixed="right">
            <template slot-scope="scope">
              <el-button type="text"
                @click="_detail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <el-dialog title="结算详情"
      :visible.sync="dialogVisible"
      width="600px">
      <el-form class="detail">
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款方">
              {{detailData.payName}}
            </el-form-item>
            <el-form-item label="结算单号">
              {{detailData.clearingNum}}
            </el-form-item>
            <el-form-item label="收款方姓名">
              {{detailData.person}}
            </el-form-item>
            <el-form-item label="收款方卡号">
              {{detailData.account}}
            </el-form-item>
            <el-form-item label="付款金额">
              {{detailData.payMoney}}
            </el-form-item>
            <el-form-item label="到账时间">
              {{detailData.arriveTime}}
            </el-form-item>
            <el-form-item label="凭证"
              v-show="detailData.voucher">
              <img :src="detailData.voucher" alt="voucher" v-if="detailData.voucher" width="500"/>
            </el-form-item>
            <el-form-item label="备注">
              {{detailData.remark}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流水单号">
              {{detailData.flowing}}
            </el-form-item>
            <el-form-item label="收款酒店">
              {{detailData.hotelName}}
            </el-form-item>
            <el-form-item label="收款方银行">
              {{detailData.payName}}
            </el-form-item>
            <el-form-item label="付款金额">
              {{detailData.banks}}
            </el-form-item>
            <el-form-item label="结算时间">
              {{detailData.createTime}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getFinanceTransferList,financeExcel } from "@/public/js/finance";
import { exportToExcel } from "@/public/js/util";
export default {
  components: {},
  props: {},
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      time: 0,
      timeStr: "时间类型",
      dialogVisible: false,
      detailData: "",
      transferList: [],
      startEndTime: [],
      exportFinanceList: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    _getFinanceTransferList() {
      getFinanceTransferList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        time: this.time,
        startTime: this.startEndTime ? this.startEndTime[0] : "",
        endTime: this.startEndTime ? this.startEndTime[1] : ""
      }).then(res => {
        this.transferList = res.data.transferList;
        this.total = res.data.total;
      });
    },
    _exportFinanceExcel(callback) {
      financeExcel({
        time: this.time,
        startTime: this.startEndTime ? this.startEndTime[0] : "",
        endTime: this.startEndTime ? this.startEndTime[1] : ""
      }).then(res => {
        this.exportFinanceList = res.data.transferList;
        callback();
      });
    },
    // 导出表格
    _export() {
      this._exportFinanceExcel(() => {
        const tHeader = [
          "付款方",
          "结算单号",
          "流水单号",
          "收款酒店",
          "收款方姓名",
          "收款方银行",
          "收款方卡号",
          "付款金额",
          "到账时间",
          "结算时间",
          "备注"
        ];
        const filterVal = [
          "payName",
          "clearingNum",
          "flowing",
          "hotelName",
          "person",
          "banks",
          "account",
          "payMoney",
          "arriveTime",
          "createTime",
          "remark"
        ];
        exportToExcel(tHeader, filterVal, this.exportFinanceList, "转账记录表");
      });
    },
    _reset() {
      this.pageNo = 1;
      this.pageSize = 10;
      this._getFinanceTransferList();
    },
    setTime(time) {
      this.timeStr = time.title;
      this.time = time.value;
      if (this.time == 0) {
        this.startEndTime = [];
        this._getFinanceTransferList();
      }
    },
    _detail(data) {
      console.log(data);
      this.detailData = data;
      this.dialogVisible = true;
    }
  },
  created() {
    this._getFinanceTransferList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
</style>